<template>
  <div class="artList">
    <ul class="list">
      <li class="item" v-for="(item,index) in data" :key="index">
        <div class="content">
          <router-link :to="{path:'/artDetails',query:{id:item._id}}">
            <h4 class="title">{{item.title}}</h4>
          </router-link>
          <p class="info">{{item.info}}</p>
          <div class="meta">
            <span>查看 {{item.lookAt}}</span>
            <span>评论 {{item.commentNum}}</span>
            <span>赞 {{item.praise}}</span>
            <span>{{item.mate.updateAt}}</span>
          </div>
        </div>
        <img :src="item.banner" alt />
      </li>
    </ul>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
      >{{total}}</el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 6,
      total: 0,
      data: []
    };
  },
  methods: {
    getList() {
      var that = this;
      that
        .$ajax({
          url:
            "/no/essayList?page=" + that.currentPage + "&limit=" + that.pagesize
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.data = res.data.data.data;
              that.total = res.data.data.count;
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    handleSizeChange: function(size) {
      this.pagesize = size;
      this.getList();
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style scoped>
.list {
  width: 100%;
}
.list .item {
  width: 100%;
  padding: 15px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
.list .item img {
  width: 125px;
  height: 100px;
}
.list .item .content .title {
  color: #333;
  margin: 7px 0 4px;
  display: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.list .item .content .info {
  min-height: 30px;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 24px;
  color: #555;
}
.list .item .content .meta {
  padding-right: 0 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.list .item .content .meta span {
  margin-right: 10px;
  color: #666;
}
/* 分页器 */
.pagination {
  text-align: center;
  margin-top: 30px;
}
</style>


